<template>
    <label :for="title" class="k-input">
        <input :id="title" :value="modelValue" @submit.prevent @input="update" :type="type||''" autocomplete="off" />
        <span :style="style">{{ title }}</span>
    </label>
</template>

<script setup>
import { onUnmounted, reactive,ref } from 'vue';


defineProps({
    title: {
        default: "title",
        type: String
    },
    modelValue:{
        default: "",
        type: String
    },
    type: String
})
const emits = defineEmits(["update:modelValue"])
function update() {
    if (event.target.value===""||!event.target.value===true){
        style.value = {}
    }else {
        style.value = {
            fontSize: "var( --ki-title)",
            top: "0.1em",
            color: "var(--ki-select)",
        }
    }
    emits('update:modelValue',event.target.value)
}
const style = ref({})

onUnmounted(()=>{
    emits('update:modelValue',"")
})
</script>

<style>
:root {
    --ki-hover: #666;
    --ki-unhover: #aaa;
    --ki-select: #73e;
    --ki-pad: .9em;
    --ki-title: .8em;
}
.k-input{
    position: relative;
    border-bottom: var(--ki-unhover) solid 1px;
    transition: all 0.2s;
    height: 42px;
    width: 100%;
    box-sizing:content-box;
    display: block;
    overflow: hidden;
}
.k-input>span{
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    position: absolute;
    z-index: 1;
    height: 1em;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 50%;
    left: var(--ki-pad);
    font-size: 1em;
    transition: all .5s;
    color: var(--ki-unhover);
}

.k-input:hover{
    border-bottom: var(--ki-hover) solid 1px;
}
.k-input:focus-within{
    border-bottom: var(--ki-select) solid 1px;
}

.k-input:focus-within>span{
    font-size: var( --ki-title);
    top: 0.1em;
    color: var(--ki-select);
}

.k-input>input{
    font-size: 1em;
    position: absolute;
    bottom: .1em;
    padding: 0 var(--ki-pad);
    width: calc(100% - 1.2em);
}

.k-input>input:focus-visible{
    outline: none;
}

</style>